<template>
	<div>
		<el-card class="!border-none p-4" shadow="never">
			<div class="topTitle font-bold main-color text-2xl mb-5">
				产品信息
			</div>
			<el-table class="mt-[20px]" size="large" :data="list"
				:header-cell-style="{'background':'#0054A6','color':'#fff','line-height':'52px','padding':'14px 0'}"
				:cell-style="{'color':'#0054A6','padding':'20px 0'}">
				<el-table-column label="总件数" prop="scene_name" align="center">
					<template #default="{ row }">
						<el-button type="primary" link>
							<span class="main-color">0133</span>
						</el-button>
					</template>
				</el-table-column>
				<el-table-column label="总毛重(kg)" prop="scene_name" align="center">
					<template #default="{ row }">
						<el-button type="primary" link>
							<span class="main-color">2412800</span>
						</el-button>
					</template>
				</el-table-column>
				<el-table-column label="总体积(CBM)" prop="2342" align="center" />
				<el-table-column label="总托数" prop="scene_name" align="center">
					<template #default="{ row }">
						<span class="main-color">200</span>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
		<el-card class="!border-none p-4" shadow="never">
			<div class="topTitle font-bold main-color text-2xl mb-5">
				报价
			</div>
			<div class="main-color">
				<el-row class="mt-[30px]">
					<el-col :span="6">
						<div>
							<span class="w-[120px] inline-block text-right mr-[10px]">业务编码：</span>1223245
							14:00:12
						</div>
					</el-col>
					<el-col :span="6">
						<div>
							<span class="w-[120px] inline-block text-right mr-[10px]">截单日期：</span>2023-09-19
						</div>
					</el-col>
				</el-row>
				<el-row class="mt-[20px]">
					<el-col :span="6">
						<div>
							<span class="w-[120px] inline-block text-right mr-[10px]">业务员：</span>王小明
						</div>
					</el-col>
					<el-col :span="6">
						<div>
							<span class="w-[120px] inline-block text-right mr-[10px]">目的港：</span>北美
						</div>
					</el-col>
				</el-row>
				<el-row class="mt-[20px]">
					<el-col :span="6">
						<div>
							<span class="w-[120px] inline-block text-right mr-[10px]">接单号：</span>454532
						</div>
					</el-col>
					<el-col :span="6">
						<div>
							<span class="w-[120px] inline-block text-right mr-[10px]">件毛体：</span>aaaaaaaa
						</div>
					</el-col>
				</el-row>
				<el-row class="mt-[20px]">
					<el-col :span="6">
						<div>
							<span class="w-[120px] inline-block text-right mr-[10px]">预计重量：</span>1800kg
						</div>
					</el-col>
					<el-col :span="6">
						<div>
							<span
								class="w-[120px] inline-block text-right mr-[10px]">预计方数：</span>120
						</div>
					</el-col>
				</el-row>
				<el-row class="mt-[20px]">
					<el-col :span="6">
						<div>
							<span class="w-[120px] inline-block text-right mr-[10px]">实际进仓重量：</span>1800kg
						</div>
					</el-col>
					<el-col :span="6">
						<div>
							<span class="w-[120px] inline-block text-right mr-[10px]">实际进仓方数：</span>120
						</div>
					</el-col>
				</el-row>
				<el-row class="mt-[20px]">
					<el-col :span="6">
						<div>
							<span class="w-[120px] inline-block text-right mr-[10px]">单价(USD/吨)：</span>$2200
						</div>
					</el-col>
					<el-col :span="6">
						<div>
							<span class="w-[120px] inline-block text-right mr-[10px]">进仓费(RMB)：</span>$320
						</div>
					</el-col>
				</el-row>
				<el-row class="mt-[20px]">
					<el-col :span="6">
						<div>
							<span class="w-[120px] inline-block text-right mr-[10px]">USD：</span>$2200
						</div>
					</el-col>
					<el-col :span="6">
						<div>
							<span class="w-[120px] inline-block text-right mr-[10px]">RMB：</span>$320
						</div>
					</el-col>
				</el-row>
				<el-row class="mt-[20px]">
					<el-col :span="6">
						<div>
							<span class="w-[120px] inline-block text-right mr-[10px]">备注：</span>备注内容备注内容
						</div>
					</el-col>
				</el-row>
			</div>
		</el-card>
		<el-card class="!border-none p-4 mt-[20px]" shadow="never">
			<div class="topTitle font-bold main-color text-2xl mb-5">
				运费结算信息
			</div>
			<div class="pb-[20px] pl-[30px] borderBottom flex">
				<div class="main-color">审核：</div>
				<el-radio-group v-model="radio" class="ml-4" text-color="#0054a6" fill="#0054a6">
					<el-radio label="1" size="large" >结算</el-radio>
					<el-radio label="2" size="large">驳回</el-radio>
					<el-radio label="3" size="large">审核通过未结算</el-radio>
				</el-radio-group>
			</div>
			<el-col :span="6" class="mt-[30px] main-color">
				<div>
					<span class="w-[75px] inline-block text-right mr-[10px]">结算金额：</span>$2200
				</div>
			</el-col>
			<el-col :span="6" class="mt-[20px] main-color">
				<div>
					<span class="w-[75px] inline-block text-right mr-[10px]">原因：</span>$320
				</div>
			</el-col>
			<el-col :span="6" class="mt-[20px] main-color">
				<div style="display: flex;align-items:flex-start;">
					<span class="w-[75px] inline-block text-right mr-[10px]">照片：</span>
					<el-image class="w-[100px] h-[100px]" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="cover" />
				</div>
			</el-col>
		</el-card>
	</div>
</template>

<script lang="ts" setup>
	import { getRoutePath } from '@/router'
	const list = ref<Array<any>>([
		{}
	])
	const value = ref('123432152')
	const radio = ref(3)
</script>

<style scoped lang="scss">
	.borderBottom{
		border-bottom: 1px solid #F5F5F5;
	}
	.flex{
		display: flex;
		align-items: center
	}
</style>